<template>
  <div class="wuzi">
    <router-link to="/">
      <div class="Label">返回疫情地图</div>
    </router-link>
    <!-- 顶部背景图 -->
    <img width="100%" src="../../assets/images/防疫物质指南.png" alt="" />
    <!-- 物资内容 -->
    <div class="wrapper">
      <!-- vant库-tabs标签 -->
      <van-tabs
        v-model="active"
        type="card"
        color="#FFF"
        swipeable
        animated
        background="#6874ff"
        title-active-color="#6874ff"
      >
        <van-tab v-for="item in arr" :title="item.title1" :key="item.title">
          <div class="content3">
            <div class="title1">
              <i></i>
              <div>{{ item.title2 }}</div>
              <i></i>
            </div>
            <img width="100%" :src="item.img" alt="" />
            <img width="100%" :src="item.img2" alt="" />
            <img width="100%" :src="item.img3" alt="" />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import img2 from "../../assets/images/口罩.png";
import img3 from "../../assets/images/洗手液.png";
import img4 from "../../assets/images/温度计.png";
export default {
  data() {
    return {
      active: 0,
      arr: [
        {
          img: require("../../assets/images/酒精.png"),
          img2: require("../../assets/images/含氯消毒剂.png"),
          img3: require("../../assets/images/过氧化物类消毒剂.png"),
          title1: "消毒剂",
          title2: "消毒剂指南",
        },
        {
          img: img2,
          title1: "口罩",
          title2: "口罩指南",
        },
        {
          img: img3,
          title1: "洗手液",
          title2: "洗手液指南",
        },
        {
          img: img4,
          title1: "温度计",
          title2: "温度计指南",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.van-tabs__nav--card {
  border: none;
}
.wuzi {
  background-color: #3343ff;
  position: relative;
  .Label {
    top: 0.23rem;
    left: 0.3rem;
  }
}
.wrapper {
  background-color: #3343ff;
  height: 100%;
}
.content3 {
  margin: 10px 15px 0 15px;
  padding: 0.2rem;
  background-color: #ffffff;
  border-radius: 0.1rem;
  .title1 {
    padding: 10px 0 10px 0;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      display: block;
      width: 15px;
      height: 2px;
      background-color: #cccccc;
    }
    div {
      margin: 0 20px 0 20px;
    }
  }
}
.van-tab {
  background-color: blue;
}
</style>
